<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>登录${config.siteName}</title>
<link rel="shortcut icon" href="${url.base}/static/favicon.ico"/>
#script()
<script type="text/javascript">
$("document").ready(function(){       
	setTimeout(function(){
		$("input[type='text']:eq(0)").focus(); 
	},200);

	var fields = {nickname:{valid:false,name:"用户名"},
	      			   password:{valid:false,name:"密码"},
	                   _password:{valid:false,name:"确认密码"},
	                   email:{valid:false,name:"邮箱地址"},
	                   captcha:{valid:false,name:"验证码"}};
	$('form').submit(function(){
		for(prop in fields){
			if(!fields[prop].valid){
				alert(fields[prop].name + "没有通过验证");
				return false;
			}
		}
		var form = $(this).serializeObject();
		$.postJSON($(this).attr('action'), form, function(data){
			if(data.success){
				self.parent.forum.dialog.registerSuccess();
			} else {
				$('#captcha').click();
				$("input[name='captcha']").val('');
				printError(data);
			}
		});	
		return false;
	});

	$("input[name='captcha']").keyup(function(){
		var val = $(this).val();
		if(val.length != 5){
			return;
		}
		$.get(forum.baseURL+'/captcha/validate', {"captcha":val}, function(data){
			if(data.success){
				fields.captcha.valid = true;
			}else {
				$('#captcha').click();
				$("input[name='captcha']").val('');
				$("input[name='captcha']").next().text("验证码错误").show().fadeOut(1000);
			}
		},'json');
	});   

	$("input[name='nickname']").change(function(){
		var val = jQuery.trim($(this).val());
		$(this).val(val);
		$.post(forum.baseURL+'/nicknameAvailable', {"nickname":val}, function(data){
			if(data.success){
				fields.nickname.valid = true;
				$("input[name='nickname']").next().text('');
			}else {
				printError(data);
			}
		},'json');
	});   

	$("input[name='email']").change(function(){
		var val = jQuery.trim($(this).val());
		$(this).val(val);
		$.post(forum.baseURL+'/emailAvailable', {"email":val}, function(data){
			if(data.success){
				fields.email.valid = true;
				$("input[name='email']").next().text('');
			}else {
				printError(data);
			}
		},'json');
	});  

	$("input[name='password']").change(function(){
		var val = $(this).val();
		$.post(forum.baseURL+'/passwordAvailable', {"password":val}, function(data){
			if(data.success){
				fields.password.valid = true;
				$("input[name='password']").next().text('');
			}else {
				printError(data);
			}
		},'json');
	});  

	$("input[name='_password']").change(function(){
		var val = $(this).val();
		var password = $("input[name='password']").val();
		if(val==password){
			fields._password.valid = true;
			$(this).next().text('');
		}else{
			$(this).next().text('输入的密码不一致');
		}
	});  
}); 

function printError(data){
	if(data.success){
		return;
	}
	for(var i=0;i<data.errors.length;i++){
		if(data.errors[i].element==null){
			alert(data.errors[i].message);
		}else {
			$("*[name='"+data.errors[i].element+"']").next().text(data.errors[i].message);
		}
	}
}
</script>
<style type="text/css">
*{
	margin:0;
	padding:0;
}
h3{
	font-size:16px;
	line-height:1em;
	font-weight:bold;
}
body{
	font-size:12px;
	width:370px;
}
#page{
	margin:0 auto;
	width:100%;
	padding:0 50px;
}
table td{
	font-size:14px;
	letter-spacing:3px;
	vertical-align:text-top;
}
input{
	height:18px;
	width:160px;
}

.normal{
	font-size:12px;
	line-height:1em;
	letter-spacing:0px;
}
.error{
	font-size:12px;
	color:red;
	letter-spacing:0px;
}
.why{
	font-size:12px;
	text-decoration: underline;;
	color:black;
}
</style>
</head>
<body>
<span title="关闭" style="position:absolute;top:0; right:0;color:#6BC870; font-weight:bold; cursor:pointer;" onclick="self.parent.tb_remove();">×</span>
<div id="page">
	<h3 style="margin:10px;">${config.siteName}会员注册</h3>
	<form action="$url.base/signup" method="post">
	<table cellpadding="3" cellspacing="5">
		<tr>
			<td width="85" style="padding-top:5px;">昵称：</td>
			<td>
				<input type="text" name="nickname"/>
				<span class="error"></span>
				<br/>
				<span class="normal" style="color:#666;">不超过7个汉字，或14个字节(数字，字母和下划线)</span>
			</td>
		</tr>
		<tr>
			<td style="padding-top:5px;">设置密码：</td>
			<td>
				<input type="password" name="password"/>
				<span class="error"></span>
				<br/>
				<span class="normal" style="color:#666;">密码长度6～14位，字母区分大小写</span>
			</td>
		</tr>
		<tr>
			<td style="padding-top:5px;">确认密码：</td>
			<td><input type="password" name="_password"/>
			<span class="error"></span></td>
		</tr>
		<tr>
			<td style="padding-top:5px;">邮箱地址：</td>
			<td>
				<input type="text" name="email" style="width:200px;"/>
				<span class="error"></span>
				<br/>
				<span class="normal" style="color:#666;">请输入有效的邮件地址，当密码遗失时凭此领取</span>
			</td>
		</tr>
		<tr>
			<td style="padding-top:5px;">验证码：</td>
			<td>
				<img id="captcha" title="点击换一张" src="$url.base/captcha" onclick="$(this).attr('src','$url.base/captcha?'+new Date().getTime())"/>
				<input type="text" name="captcha" style="width:60px;" maxLength="5"/>
				<span class="error"></span>
				<br/>
				<span class="normal" style="color:#666;">请输入上方图片中的５位字符</span>
				<a href="#" class="why" title="由于互联网上有些程序会自动注册来发布违法广告，严重影响访问者浏览网页和交流，我们用验证码来阻止这些自动注册程序。给您带来不便请谅解。如果您看不清验证码，请与管理员联系。" >为什么</a>？
			</td>
		</tr>
		<tr>
			<td></td>
			<td colspan="2">
				<input style="width:50px;height:23px;line-height:1.4em;letter-spacing:2px;" type="submit" value="注册"/> 
			</td>
		</tr>
	</table>
	</form>
</div>
</body>
</html>